<template>
    <div class="container">
      <!-- 搜索栏 -->
      <SearchBox :data="searchData" @search="handleSearch" />
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <el-button
            type="primary"
            plain
            size="mini"
            icon="el-icon-plus"
            @click="onCreate"
            >新增</el-button>
        </el-col>
      </el-row>
      <!-- 列表 -->
      <TableBox :loading="loading" :list="list" :page="paginationData" @edit="handleEdit" @delete="handleDelete" />
      <!-- 分页 -->
      <pagination v-show="paginationData.total > 0" :total="paginationData.total" :page.sync="paginationData.page" :limit.sync="paginationData.size" @pagination="handlePaginationChange" />
      <!-- 新增、编辑 -->
      <CreateDialog v-if="createData.bSwitch" :data="createData" @refresh="getList" />
      </div>
  </template>
  
  <script>
  import SearchBox from './components/SearchBox.vue'
  import TableBox from './components/TableBox.vue'
  import CreateDialog from './components/CreateDialog.vue'
  import { listCoupon } from '@/api/coupon'

  export default {
    components: {
      SearchBox,
      TableBox,
      CreateDialog
    },
    data() {
      return {
        list: [],
        loading: false,
        searchData: {
          searchKey: null,
          type: null,
          enabled: null
        },
        paginationData: {
          total: 0,
          page: 1,
          size: 10
        },
        createData: {
          id: null,
          bSwitch: false
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      // 新增
      onCreate() {
        this.createData.id = null
        this.createData.bSwitch = true
      },
      // 编辑
      handleEdit(uuid) {
        this.createData.id = uuid
        this.createData.bSwitch = true
      },
      // 删除
      handleDelete() {
        this.paginationData.page = 1
        this.getList()
      },
      // 搜索
      handleSearch() {
        this.paginationData.page = 1
        this.getList()
      },
      // 获取列表数据
      async getList() {
        const { searchKey, type, enabled } = this.searchData
        const { page, size } = this.paginationData
        const params = {
          searchKey,
          type,
          enabled,
          pageNum: page,
          pageSize: size
        }
        this.loading = true
        listCoupon(params).then(response => {
            this.list = response.rows
            this.paginationData.total = response.total
            this.loading = false
          }
        )
      },
      // 分页
      handlePaginationChange(val) {
        this.paginationData.page = val.page
        this.paginationData.size = val.limit
        this.getList()
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .container {
    padding: 20px;
  }
  </style> 